<template>
  <div class="task-detail-container">
    <el-row :gutter="20" class="fixed-height">
      <!-- 任务详情（左侧） -->
      <el-col :span="12" class="full-height">
        <el-card v-if="task" class="task-info full-height">
          <h2>任务详情</h2>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="任务名称">{{ task.title }}</el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.task_priority" :value="task.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.task_status" :value="task.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="指派给">{{ task.assignedToName }}</el-descriptions-item>
            <el-descriptions-item label="截止日期">
              {{ parseTime(task.dueDate, '{y}-{m}-{d}') }}
            </el-descriptions-item>
          </el-descriptions>

          <!-- 任务描述 -->
          <el-card class="task-description">
            <h3>任务描述</h3>
            <div v-html="task.description"></div>
          </el-card>
        </el-card>
        <el-empty v-else description="暂无任务信息"/>
      </el-col>

      <!-- 任务评论（右侧） -->
      <el-col :span="12" class="full-height">
        <el-card class="comment-section full-height">
          <h3>任务评论</h3>
          <div class="comment-list" ref="commentList">
            <el-timeline v-if="comments.length > 0">
              <el-timeline-item
                v-for="comment in comments"
                :key="comment.id"
                :timestamp="parseTime(comment.createdAt, '{y}-{m}-{d} {h}:{i}')"
                placement="top"
              >
                <el-card class="comment-item">
                  <h4>添加人：{{ comment.userName }}</h4>
                  <p v-html="comment.comment"></p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <el-empty v-else description="暂无评论"/>
          </div>

          <!-- 底部输入框 -->
          <div class="comment-input">
            <el-input
              v-model="newComment"
              placeholder="输入评论..."
              type="textarea"
              rows="2"
            ></el-input>
            <el-button type="primary" class="submit-btn" @click="addComment">添加评论</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addComment, listAllComment} from "@/api/project/comment";

export default {
  name: "TaskDetail",
  dicts: ['task_status', 'task_type', 'task_priority'],
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      comments: [],
      newComment: ""
    };
  },
  created() {
    this.getComments();
  },
  updated() {
    this.scrollToBottom();
  },
  watch: {
    task: {
      handler(newVal) {
        this.getComments();
      },
      deep: true
    }
  },
  methods: {
    getComments() {
      if (!this.task.id) return;
      listAllComment({taskId: this.task.id}).then(response => {
        if (response.code === 200) {
          this.comments = response.data || [];
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        }
      });
    },
    addComment() {
      if (!this.newComment.trim()) return;
      addComment({taskId: this.task.id, comment: this.newComment}).then(response => {
        if (response.code === 200) {
          this.newComment = "";
          this.getComments(); // 重新拉取评论
        }
      });
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.commentList;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.task-detail-container {
  padding: 10px;
  height: 100%;
}

.fixed-height {
  height: 600px;
}

.full-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 使任务详情可滚动 */

  .el-descriptions {
    flex: 1;
    overflow: auto;
  }

  .task-description {
    flex: 1;
    overflow-y: auto; /* 使任务描述区域可滚动 */
    margin-top: 10px;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 5px;
    max-height: 270px; /* 设置最大高度，确保内容过多时可以滚动 */
  }
}

.comment-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comment-list {
  overflow-y: auto;
  flex: 1;
  padding-right: 10px;
  height: 450px
}

.comment-input {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #eee;
}

.submit-btn {
  white-space: nowrap;
}
</style>
